import Legend from "./_legend.md";

<table>
  <tbody style={{ display: "table", width: "100%" }}>
    <tr>
      <th style={{ width: "40%", whiteSpace: "nowrap" }}>Class</th>
      <th>Support</th>
    </tr>
    {(props.supported || []).map((value, index) => (
      <tr key={`supported-${index}`}>
        <td>
          <pre>
            <code>{value}</code>
          </pre>
        </td>
        <td>✅ Full Support</td>
      </tr>
    ))}
    {(props.experimental || []).map((value, index) => (
      <tr key={`supported-${index}`}>
        <td>
          <pre>
            <code>{value}</code>
          </pre>
        </td>
        <td>🧪 Experimental Support</td>
      </tr>
    ))}
    {(props.native || []).map((value, index) => (
      <tr key={`supported-${index}`}>
        <td>
          <pre>
            <code>{value}</code>
          </pre>
        </td>
        <td>📱 Native only</td>
      </tr>
    ))}
    {(props.partial || []).map((value, index) => (
      <tr key={`partial-${index}`}>
        <td>
          <pre>
            <code>{value}</code>
          </pre>
        </td>
        <td>✔️ Partial Support</td>
      </tr>
    ))}
    {(props.none || []).map((value, index) => (
      <tr key={`partial-${index}`}>
        <td>
          <pre>
            <code>{value}</code>
          </pre>
        </td>
        <td>🌐 Web only</td>
      </tr>
    ))}
  </tbody>
</table>

<>{props.legend || props.legend === undefined ? <Legend /> : <></>}</>
